<template>
    <div class="BranchTree" :style="`height:${height > 0 ? height + 'px' : 'auto'}`">
        <div class="BranchTree-title">部门机构</div>
        <div class="BranchTree-tree" @contextmenu="rclick">
            <el-tree ref="elBranchTree" node-key="id" v-loading="loading" :data="dataList" :props="{ children: 'children', label: 'branch_name' }" highlight-current :expand-on-click-node="false"
                default-expand-all @current-change="currentChange"></el-tree>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import { useStore } from "vuex";
import TreeTool from "@/lib/TreeTool";
import http from "@/lib/http/http";
/**
 * state 数据类型
 */
interface IState {
    /**
     * 加载loading
     */
    loading: boolean;
    /**
     * 数据列表
     */
    dataList: any[];
}
export default defineComponent({
    name: "BranchTree",
    props: {
        height: {
            type: Number,
            default: 0,
        },
    },
    emits: ["change"],
    setup(props, { emit }) {
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        const treeTool: TreeTool = new TreeTool(); // 树工具
        const elBranchTree: any = ref<any>();
        const state = reactive<IState>({
            loading: false,
            dataList: [],
        });
        /**
         * 获取内容
         */
        const getList = () => {
            state.loading = true;
            http.Get(`/branch`)
                .then((data: any) => {
                    state.dataList = treeTool.listToTree(data, "");
                    state.loading = false;
                })
                .catch((err: any) => (state.loading = false));
        };
        /**
         * 当前选中节点变化时触发的事件
         */
        const currentChange = (row: any, Node: any) => {
            emit("change", row);
        };
        /**
         * 右键点击
         */
        const rclick = () => {
            elBranchTree.value.setCurrentKey(null);
            currentChange(null, null);
        };
        getList();
        return {
            UIAuth,
            bodySize,
            elBranchTree,
            ...toRefs(state),
            currentChange,
            rclick,
        };
    },
});
</script>

<style scoped lang="scss">
.BranchTree {
    height: 100%;
    &-title {
        text-align: center;
        //height:25px;
        line-height: 30px;
        background-color: $text-gray2-color;
        color: $text-secondary-color;
        font-weight: bold;
    }
    &-tree {
        height: calc(100% - 30px);
        border: 1px $text-gray2-color solid;
        overflow-x: hidden;
        overflow-y: auto;
    }
}
</style>